<script setup lang="ts">
import { FormInstance, ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';
import { regionData } from 'element-china-area-data';
import { InternalRuleItem } from 'async-validator';
import { createJob } from '../services/job';
import { JobDetail } from '../types/Job';
import useStore from '../store/modules/User';
// 职位发布表单引用
const ruleFormRef = ref<FormInstance>();
// User store
const userStore = useStore();
// 职位发布表单响应式变量
const form = reactive<JobDetail>({
  id: '',
  status: '',
  title: '',
  target: 0,
  intro: '',
  detail: '',
  require_education: '',
  require_experience: '',
  salary_low: 0,
  salary_high: 0,
  salary_times: 12,
  location: [],
  publisher_id: '',
});
// 经验要求列表
const experienceList = [
  '经验不限',
  '经验2年以下',
  '经验2-5年',
  '经验5-10年',
  '经验10年以上',
];
// 学历要求列表
const educationList = [
  '高中学历',
  '大专学历',
  '本科学历',
  '硕士学历',
  '博士学历',
];
// 城市地址列表
const locationArea = regionData;
// 正整数验证规则
const validatePositive = (
  rule: InternalRuleItem,
  value: number,
  callback: (error?: string | Error) => void
) => {
  if (value >= 0) {
    callback();
  } else {
    callback(new Error('请正确输入数字'));
  }
};
// 工资输入验证规则
const validateSalary = (
  rule: InternalRuleItem,
  value: number,
  callback: (error?: string | Error) => void
) => {
  if (form.salary_high > 0 && form.salary_low > 0 && form.salary_times > 8) {
    callback();
  } else {
    callback(new Error('请正确输入薪资数字'));
  }
};
// 表单验证规则
const rules = {
  title: [{ required: true, message: '请输入职位名称', trigger: 'blur' }],
  target: [{ validator: validatePositive, required: true, trigger: 'blur' }],
  require_education: [
    { required: true, message: '请选择学历要求', trigger: 'blur' },
  ],
  require_experience: [
    { required: true, message: '请选择经验要求', trigger: 'blur' },
  ],
  salary: [{ validator: validateSalary, required: true }],
  location: [{ required: true, message: '请选择工作地点', trigger: 'blur' }],
  intro: [{ required: true, message: '请输入内容', trigger: 'blur' }],
  detail: [{ required: true, message: '请输入内容', trigger: 'blur' }],
};
// 表单提交方法
const handleSubmit = async () => {
  if (!ruleFormRef.value) return;
  await ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      const response = await createJob(form);
      if (response.status === 201) {
        ElMessage.success('创建成功');
        // 重置表单
        ruleFormRef.value?.resetFields();
      } else {
        ElMessage.error('创建失败');
      }
    } else {
      ElMessage.error('请仔细检查表单');
    }
  });
};
</script>

<template>
  <div class="container">
    <el-form
      ref="ruleFormRef"
      class="form-box"
      :rules="rules"
      :model="form"
      label-width="80px"
    >
      <el-form-item label="职位名称" prop="title">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="招聘人数" prop="target">
        <el-col :span="10">
          <el-input v-model="form.target"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="薪资" prop="salary">
        <el-col :span="6">
          <el-input v-model="form.salary_low"></el-input>
        </el-col>
        <el-col class="line" :span="2">K -</el-col>
        <el-col :span="6">
          <el-input v-model="form.salary_high"></el-input>
        </el-col>
        <el-col class="line" :span="2">K </el-col>
        <el-col :span="6">
          <el-select
            v-model="form.salary_times"
            :teleported="false"
            popper-class="select-popper"
            placeholder="请选择"
          >
            <el-option
              v-for="num in [12, 13, 14, 15, 16, 17, 18]"
              :key="num"
              :label="num"
              :value="num"
            ></el-option>
          </el-select>
        </el-col>
        <el-col class="line" :span="2">薪水</el-col>
      </el-form-item>
      <el-form-item label="学历要求" prop="require_education">
        <el-select
          v-model="form.require_education"
          :teleported="false"
          popper-class="select-popper"
          placeholder="请选择"
        >
          <el-option
            v-for="item in educationList"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="经验要求" prop="require_experience">
        <el-select
          v-model="form.require_experience"
          :teleported="false"
          popper-class="select-popper"
          placeholder="请选择"
        >
          <el-option
            v-for="item in experienceList"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工作地点" prop="location">
        <el-col :span="12">
          <el-cascader
            v-model="form.location"
            :teleported="false"
            popper-class="select-popper"
            placeholder="请选择"
            :options="locationArea"
          ></el-cascader>
        </el-col>
      </el-form-item>
      <el-form-item label="职位诱惑" prop="intro">
        <el-input v-model="form.intro" type="textarea" rows="2"></el-input>
      </el-form-item>
      <el-form-item label="职位描述" prop="detail">
        <el-input v-model="form.detail" type="textarea" rows="5"></el-input>
      </el-form-item>
      <el-form-item label="发布人">
        {{ userStore.getName }}
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
::v-deep .el-cascader {
  width: 100%;
}
.select-popper {
  z-index: 8888 !important;
  top: auto !important;
  left: auto !important;
}

.form-box {
  width: 600px;
}

.form-box .line {
  text-align: center;
}
</style>
